<!-- App.vue -->
<template>
  <div id="app">
    <button @click="goToPage('Page1')">1</button>
    <button @click="goToPage('Page2')">2</button>
    <button @click="goToPage('Page3')">3</button>
    <button @click="goToPage('Page4')">4</button>
  </div>
</template>

<script>
// 动态导入页面组件
const Page1 = () => import('@/pages/index/index.vue');
const Page2 = () => import('@/pages/Page2/Page2.vue');
const Page3 = () => import('@/pages/Page3/Page3.vue');
const Page4 = () => import('@/pages/Page4/Page4.vue');


export default {
  data() {
    return {
      pageComponents: {
        Page1: Page1,
        Page2: Page2,
        Page3: Page3,
        Page4: Page4
      },
      currentPage: 'Page1' // 确保这个值在 pageComponents 中有对应的组件
    };
  },
  computed: {
    currentPageComponent() {
      // 返回对应的组件，如果 currentPage 不在 pageComponents 中，则返回默认组件
      return this.pageComponents[this.currentPage] || DefaultComponent;
    }
  },
  methods: {
    goToPage(pageName) {
      // 确保 pageName 是有效的，这里可以添加额外的验证逻辑
      if (this.pageComponents[pageName]) {
        this.currentPage = pageName;
      } else {
        console.warn(`Page "${pageName}" not found. Defaulting to "Page1".`);
        this.currentPage = 'Page1'; // 或者你可以设置为其他默认页面
      }
    }
  }
};
</script>